<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      姓：<input type="text" v-model="firstName" /><br />
      名：<input type="text" v-model="lastName" /><br />
      <span>{{fullName}}</span>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "JIN",
            fullName: "张----jin",
          };
        },
        watch: {
          firstName: function (newvalue) {
            this.fullName = newvalue + this.lastName;
          },
          lastName: function (newvalue) {
            this.fullName = this.firstName + "-----" + newvalue;
          },
        },
      });
    </script>
  </body>
</html>
